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W3School AngularJS 教 程 


来 源 : AngularJS 教程 
整理 : 飞龙 


AngularJS 简介 


AngularJS 是 一 个 JavaScript 框架 。 它 可 通过 «script» 标签 添加 到 HTML 页 面 。 
AngularJS 通过 789 扩展 了 HTML， 且 通过 表达 式 绑 定 数据 到 HTML. 


AngularJS 是 一 个 JavaScript 框架 


AngularJS 是 一 个 JavaScript 框架 。 它 是 一 个 以 JavaScript 编写 的 库 。 
AngularJS 是 以 一 个 JavaScript 文件 形式 发 布 的 ， 可 通过 script 标签 添加 到 网 页 
中 : 


«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 





L| 我 们 建议 把 脚本 放 在 <body> 元 素 的 底部 。 
这 会 提高 网 页 加 载 速度 ， 因 为 HTML 加 载 不 受制 于 脚本 加 载 


AngularJS 扩展 了 HTML 


AngularJS 通过 ng-directives 扩展 了 HTML. 

ng-app 指令 定义 一 个 AngularJS 应 用 程序 。 

ng-model 指令 把 元 素 值 (比如 输入 域 的 值 ) 绑 定 到 应 用 程序 。 
ng-bind 指令 把 点 用 程序 数据 绑 定 到 HTML 视图 。 


AngularJS 实例 


<!DOCTYPE html» 
«html» 
<body> 
<div ng-app=""> 
<p> 在 输入 框 中 尝试 输入 : </p> 
<p> 姓 名 : <input type="text" ng-model="name"></p> 
<p ng-bind="name"></p> 
</div> 
«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


</body> 
«/html» 


实例 讲解 : 

当 网 页 加 载 完毕 ，AngularJS 自动 开启 。 

ng-app 18$ Hi" AngularJS, «div» 元 素 是 AngularJS 应 用 程序 的 "所 有 者 "。 
ng-model 指 邻 把 输入 域 的 值 绑 定 到 应 用 程序 变量 name. 

ng-bind 指令 把 应 用 程序 变量 name 绑 定 到 某 个 段落 的 innerHTML。 





9 如 果 您 移 除 了 ng-app fa, HTML 将 直接 把 表达 式 显 示 出 来 ， 不 会 去 计 
算 表 达 陈 的 结果 。 





什么 是 AngularJS ? 


"AngularJS 是 专门 为 应 用 程序 设计 的 HTML。" 


AngularJS 使 得 开发 现代 的 单一 页 面 应 用 程序 (SPAs : Single Page Applications) 
变 得 更 加 容易 。 


AngularJS 把 应 用 程序 数据 绑 定 到 HTML 元 素 。 
AngularJS 可 以 克隆 和 重复 HTML 元 素 。 
AngularJS 可 以 隐藏 和 显示 HTML 元 素 。 
AngularJS 可 以 在 HTML 元 素 " 背 后 "添加 代码 。 
AngularJS 支持 输入 验证 。 


AngularJS #4 


正如 您 所 看 到 的 ，AngularJS 指令 是 以 ng 作为 前 级 的 HTML 属性 。 
ng-init 指令 初始 化 AngularJS 应 用 程序 变量 。 


AngularJS 实例 


«div ng-app="""ng-init="firstName='John'"> 
<p> 姓 名 为 «span ng-bind="firstName"></span></p> 


«/div» 


9 HTML5 允许 扩展 的 (自制 的 ) 属性 ， 以 data- FX. 
AngularJS 属性 以 ng- 开头 ， 但 是 您 可 以 使 用 data-ng- 来 让 网 页 对 HTML5 有 
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带 有 有 效 的 HTMLS : 
AngularJS 实例 


«div data-ng-app-"" data-ng-init-'"firstName-'John'"» 
<p> 姓 名 为 «span data-ng-bind="firstName"></span></p> 


</div> 


AngularJS 表达 式 


AngularJS 表达 式 写 在 双 大 括号 内 : ** 

AngularJS 表达 式 把 数据 绑 定 到 HTML, 3x 5 ng-bind 指令 有 异曲同工 之 妙 。 
AngularJS 将 在 表达 式 书写 的 位 置 "输出 "数据 。 

AngularJS 表达 式 很 像 JavaScript 表达 式 : 它们 可 以 包含 文字 、 运 算 符 和 变量 。 
实例 10 或 undefined undefined 


AngularJS 实例 


«IDOCTYPE html» 
«html» 
<body> 


<div ng-app=""> 
<p> 我 的 第 一 个 表达 式 : {{ 5 + 5 }}</p> 
«/div» 


«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


«/body» 
«/html» 


加 IE 生生 于 到 





AngularJS 表达 式 


AngularJS 使 用 表达 式 把 数据 绑 定 到 HTML. 


AngularJS 表达 式 


AngularJS 表达 式 写 在 双 大 括号 内 : ** 

AngularJS 表达 式 把 数据 绑 定 到 HTML， 这 与 ng-bind 指 人 有 异曲同工 之 妙 。 
AngularJS 将 在 表达 式 书写 的 位 置 "输出 "数据 。 

AngularJS 表达 式 很 像 JavaScript 表达 式 : 它们 可 以 包含 文字 、 运 算 符 和 变量 。 
实例 10 或 undefined undefined 


AngularJS 数字 


AngularJS 数据 就 像 JavaScript 数字 : 
AngularJS 实例 


<div ng-app="" ng-init="quantity=1;cost=5"> 
<p> 总 价 : {{ quantity * cost }}</p> 


</div> 
使 用 ng-bind 的 相同 实例 : 
AngularJS 实例 


<div ng-app="" ng-init="quantity=1;cost=5"> 
<p> 总 价 : «span ng-bind="quantity * cost"></span></p> 


</div> 


® 使 用 ng-init 不 是 很 常见 。 您 将 在 控制 器 一 章 中 学 习 到 一 个 更 好 的 初始 化 
数据 的 方式 。 


AngularJS 字符 串 


AngularJS 字符 串 就 像 JavaScript 字符 串 : 


AngularJS 实例 


«div ng-app-"" ng-init-"firstName-'John';lastName-'Doe''- 
<p> 姓 名 : {{ firstName + " " + lastName }}</p> 
«/div» 


使 用 ng-bind 的 相同 实例 : 


AngularJS 实例 


«div ng-app-"" ng-init-"firstName-'John';lastName-'Doe''- 
<p> 姓 名 : «span ng-bind-"firstName + ' ' + lastName"></span></p> 
«/div» 


Ee —— ———————————Á— HÀ !4[ 


AngularJS 对 象 


AngularJS 对 象 就 像 JavaScript 对 象 : 
AngularJS 实例 


«div ng-app-"" ng-init-'"person-[(firstName:'John',lastName:'Doe'j"» 
<p> 姓 为 {{ person.lastName }}</p> 
</div> 
| p — ———— ác M gg] 
使 用 ng-bind 的 相同 实例 : 





AngularJS 实例 


«div ng-app-"" ng-init-'person-[(firstName:'John',lastName:'Doe'j"» 
<p> 姓 为 «span ng-bind-"person.lastName"»«/span»«/p» 


«/div» 


«] m o | 








AngularJS 数组 


AngularJS 数组 就 像 JavaScript 数组 : 
AngularJS 实例 


«div ng-app="" ng-init-"points-[1,15,19,2,40]"» 
<p> 第 三 个 值 为 {{ points[2] }}</p> 


</div> 
使 用 ng-bind 的 相同 实例 : 
AngularJS 实例 


<div ng-app="" ng-init="points=[1,15,19,2,40]"> 
<p> 第 三 个 值 为 <span ng-bind="points[2]"></span></p> 


</div> 


AngularJS 184 


AngularJS 通过 被 称 为 HES 的 新 属性 来 扩展 HTML. 


AngularJS 184 

AngularJS 指令 是 扩展 的 HTML 属性 ， 带 有 前 级 ng-。 
ng-app 指令 初始 化 一 个 AngularJS 应 用 程序 。 
ng-init 指令 初始 化 应 用 程序 数 气 。 

ng-model 指令 把 应 用 程序 数据 绑 定 到 HTML 元 素 。 


AngularJS 实例 


«div ng-app="""ng-init="firstName='John'"> 
<p> 在 输入 框 中 党 试 输入 : </p> 
<p> 姓 名 : <input type="text" ng-model="firstName"></p> 
<p> 你 输入 的 为 : {{ firstName }}</p> 


</div> 
ng-app 指使 告诉 AngularJS, «div» 元 素 是 AngularJS 应 用 程序 的 "所 有 者 "。 
y 一 个 网 页 可 以 包含 多 个 运行 在 不 同 元 素 中 的 AngularJS 应 用 程序 。 


TIUS ATE 


上 面 实 例 中 的 ** 表 达 式 是 一 个 AngularJS 数据 绑 定 表达 式 。 
AngularJS 中 的 数据 绑 定 ， 同 步 了 AngularJS 表达 式 与 AngularJS 数据 。 
** 是 通过 ng-model-"firstName"** 进行 同步 。 


在 下 一 个 实例 中 ， 两 个 文本 域 是 通过 两 个 ng-model 指令 同步 的 : 


AngularJS 实例 


«div ng-appz"" ng-init="quantity=1; price=5"> 
<h2> 价 格 计算 器 </h2> 


数量 : <input type="number" ng-model="quantity"> 
价格 : «input type="number" ng-model="price"> 


<p><b> 总 价 : </b> {{ quantity * price }}</p> 


</div> 


® 使 用 ng-init 不 是 很 常见 。 您 将 在 控制 器 一 章 中 学 习 到 一 个 更 好 的 初始 化 
数据 的 方式 。 


重复 HTML 元 素 


ng-repeat 指令 会 重复 一 个 HTML 元 素 : 


AngularJS 实例 


«div ng-app="" ng-init="names=['Jani', 'dege', 'Kai']'"» 
<p> 使 用 ng-repeat 来 循环 数组 </p> 
«ul» 
«li ng-repeat="x in names"> 
Db x }} 
</li> 
</ul> 
<div> 


ng-repeat 指 合用 在 一 个 对 象 数 组 上 : 


AngularJS 实例 


«div ng-app=""" ng-init="names=[ 
{name:'Jani',country: 'Norway'}, 
{name: 'Hege', country: 'Sweden'}, 
{name: 'Kai', country: 'Denmark'}]"> 


<p> 循 环 对 象 : </p> 
«ul» 
«li ng-repeat="x in names"> 
(( x.name + ', ' + x.country }} 
</li> 
</ul> 


</div> 





9 AngularJS 完美 支持 数据 库 的 CRUD (增加 Create、 读 取 Read、 更 新 
Update, miER&Delete) 应 用 程序 。 
把 实例 中 的 对 象 想象 成 数据 库 中 的 记录 。 











ng-app 指令 
ng-app 指令 定义 了 AngularJS 应 用 程序 的 根 元 素 。 


ng-app 指 今 在 网 页 加 载 完 毕 时 会 自动 引导 (自动 初始 化 ) 应 用 程序 。 


稍 后 您 将 学 习 到 ng-app 如 何 通过 一 个 值 (比如 ng-app="myModule") 连接 到 代码 
模块 。 


ng-init #83 
ng-init #8 4% AngularJS 应 用 程序 定义 了 初始 值 。 


通常 情况 下 ， 不 使 用 ng-init。 您 将 使 用 一 个 控制 器 或 模块 来 代替 它 。 
答 后 您 将 学 习 更 多 有 关 控 制 器 和 模块 的 知识 。 


ng-model 指令 


ng-model 184 48% HTML 元 素 到 应 用 程序 数据 。 
ng-model 指令 也 可 以 : 


为 应 用 程序 数据 提供 类 型 验证 (number, email. required) 。 
为 应 用 程序 数据 提供 状态 (invalid. dirty, touched, error) 。 
为 HTML 元 素 提 供 CSS 类 。 

Zt XE HTML 元 素 到 HTML RŽ, 


ng-repeat 184: 


ng-repeat 指令 对 于 集合 中 〈 数 组 中 ) 的 每 个 项 会 克隆 一 次 HTML 元 素 。 


AngularJS 控制 器 


AngularJS 控制 器 控制 AngularJS 应 用 程序 的 数据 。 
AngularJS 控制 器 是 常规 的 JavaScript 对 象 。 


AngularJS 控制 器 


AngularJS 应 用 程序 被 控制 器 控制 。 

ng-controller 指令 定义 了 应 用 程序 控制 器 。 

控制 器 是 JavaScript 对 象 ， 由 标准 的 JavaScript 对 象 的 构造 范 数 创建 。 
控制 器 的 $scope 是 控制 器 所 指向 的 应 用 程序 /HTML 元 素 。 


AngularJS 实例 


«div ng-app="" ng-controller="personController"> 


名 : «input type="text" ng-model="person.firstName"><br> 
yt: «input type="text" ng-model-"person.lastName"»«br» 
<br> 

姓名 : {{person.firstName + " " + person.lastName}} 


</div> 
<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe" 
3 
j 


«/script» 
实例 讲解 : 
AngularJS 应 用 程序 由 ng-app 定义 。 应 用 程序 在 <div> 内 运行 。 
ng-controller 指令 把 控制 器 命名 为 object. 


函数 personController 是 一 个 标准 的 JavaScript 34 RA His WRX, 
控制 器 对 象 有 一 个 属性 : $scope.person。 


person 对 象 有 两 个 属性 : firstName 和 lastName, 
ng-model 指令 绑 定 输入 域 到 控制 器 的 属性 (firstName 和 lastName) 。 


控制 器 属性 
上 面 的 实例 演示 了 一 个 带 有 lastName 和 firstName 这 两 个 属性 的 控制 器 对 象 。 
控制 器 也 可 以 把 函数 作为 对 象 属性 : 


AngularJS 实例 


«div ng-app="" ng-controller="personController"> 


名 : «input type="text" ng-model="person.firstName"><br> 
yt: «input type="text" ng-model-"person.lastName"»«br» 
«br» 

姓名 : ((person.fullName())) 


«/div» 


«script» 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe", 
fullName: function() { 


var X; 
X = $scope.person; 
return x.firstName + " " + x.lastName; 
j 
3 
} 
</script> 


控制 器 方法 


控制 器 也 可 以 带 有 方法 : 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 


名 : «input type="text" ng-model="person.firstName"><br> 
yt: «input type="text" ng-model-"person.lastName"»«br» 
«br» 


姓名 : {{fullName()}} 
«/div» 


«script» 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe", 


H 
$scope.fullName = function() { 
var X; 
X = $scope.person; 
return x.firstName + " " + x.lastName; 
H 
} 
</script> 


外 部 文件 中 的 控制 器 


在 大 型 的 应 用 程序 中 ， 通 常 是 把 控制 器 存储 在 外 部 文件 中 。 


只 需要 把 «script» 标签 中 的 代码 复制 到 名 为 personControllerjs 的 外 部 文件 中 即 
可 : 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 

4 : «input type="text" ng-model-"person.firstName"»«br» 
yt: «input type="text" ng-model-"person.lastName"»«br» 
«br» 

姓名 : {{person.firstName + " " + person.lastName}} 


«/div» 


«script src="personController.js"></script> 


另 一 个 实例 


下 面 的 实例 我 们 将 创建 一 个 新 的 控制 器 文件 : 


function namesController($scope) ( 
$scope.names - [ 
(name:'Jani',country:'Norway'), 
{name: 'Hege', country: 'Sweden'}, 
{name:'Kai',country: 'Denmark'} 


1; 


然后 在 应 用 程序 中 使 用 这 个 控制 器 文件 : 
AngularJS 实例 


«div ng-app-"" ng-controller="namesController"> 


«ul» 
«li ng-repeat="x in names"> 
{{ x.name + ', ' + x.country 33 
</li> 
</ul> 


</div> 


«script src="namesController.js"></script> 


AngularJS 过 滤器 


过 滤器 可 以 使 用 一 个 管道 字符 (|) 添加 到 表达 式 和 指令 


AngularJS 过 滤器 


AngularJS 过 滤器 可 用 于 转换 数据 : 


it Eas 描述 
currency 格式 化 数字 为 货币 格式 。 
filter 从 数组 项 中 选择 一 个 子 集 。 
lowercase 格式 化 字符 串 为 小 写 。 
orderBy 根据 某 个 表达 式 排 列 数组 。 
uppercase 格式 化 字符 串 为 大 写 。 


向 表达 式 添 加 过 TIAN 


(下 面 的 两 个 实例 ， 我 们 将 使 用 前 面 章节 中 提 到 的 person 控制 器 ) 
uppercase 过 滤器 格式 化 字符 串 为 大 写 : 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 
<p> 姓 名 为 (( person.lastName | uppercase }}</p> 


«/div» 
lowercase 过 滤器 格式 化 字符 串 为 小 写 : 


AngularJS 实例 


«div ng-app="" ng-controller-"personController""» 
<p> 姓 名 为 {{ person.lastName | lowercase }}</p> 


</div> 


currency 过 滤器 


currency 过 滤器 格式 化 数字 为 货币 格式 : 
AngularJS 实例 


«div ng-app=""" ng-controller="costController"> 


数量 : <input type="number" ng-model="quantity"> 
价格 : <input type="number" ng-model="price"> 


<p> 总 价 = {{ (quantity * price) | currency }}</p> 


</div> 


向 指令 添加 过 滤器 


过 滤器 可 以 通 道 字符 (D 和 一 个 过 滤器 添加 到 指令 中 。 
orderBy 过 滤器 根据 某 个 表达 式 排列 数组 : 


AngularJS 实例 


<div ng-app="" ng-controller="namesController"> 


<p> 循 环 对 象 : </p> 
«ul» 
«li ng-repeat="x in names | orderBy: 'country'"> 
{{ x.name + ', ' + x.country }} 
</li> 
</ul> 


<div> 


过 滤 输 入 


输入 过 滤器 可 以 通过 一 个 管道 字符 (|) 和 一 个 过 滤器 添加 到 指令 中 ， 该 过 滤器 后 跟 
一 个 冒号 和 一 个 模型 名 称 。 


filter 过 滤器 从 数组 中 选择 一 个 子 集 : 
AngularJS 实例 


<div ng-app="" ng-controller="namesController"> 


<p> 输 入 过 滤 : </p> 
<p><input type="text" ng-model="name"></p> 


<ul> 
«li ng-repeat="x in names | filter:name | orderBy:'country'"» 
{{ (x.name | uppercase) + ', ' + x.country }} 
</li> 
</ul> 


</div> 


E | 


AngularJS XMLHttpRequest 


$http Æ AngularJS 中 的 一 个 核心 服务 ， 用 于 读 取 远程 服务 器 的 数据 。 


读 取 JSON 文件 


以 下 是 存储 在 web 服 务 器 上 的 JSON 文件 : 
http://www.w3cschool.cc/try/angularjs/data/Customers JSON.php 


[ 

{ 

"Name" : "Alfreds Futterkiste", 
"City" : "Berlin", 

"Country" : "Germany" 

}, 

{ 

"Name" : "Berglunds snabbk?p", 
Cityt = "bule?". 

"Country" : "Sweden" 

}, 

{ 

"Name" : "Centro comercial Moctezuma", 
"City" : “México D.F.", 
"Country" : "Mexico" 

}, 

{ 

"Name" : "Ernst Handel", 

Es : "Graz", 

"Country" : "Austria" 

}, 

{ 

"Name" : "FISSA Fabrica Inter. Salchichas S.A.", 
"City" : "Madrid", 

"Country" : "Spain" 

}, 

{ 

"Name" : "Galeria del gastrónomo", 
"City" : "Barcelona", 

"Country" : "Spain" 

}, 

1 

"Name" : "Island Trading", 
"City" : "Cowes", 

"Country" : "UK" 

}, 

{ 


"Name" : "K?niglich Essen", 


"City" : "Brandenburg", 


"Country" : "Germany" 

3 

{ 

"Name" : "Laughing Bacchus Wine Cellars", 
"City" : "Vancouver", 
"Country" : "Canada" 

}, 

{ 

"Name" : "Magazzini Alimentari Riuniti", 
"City" : "Bergamo", 
"Country" : "Italy" 

}, 

d 

"Name" : "North/South", 
"City" : "London", 
"Country" : "UK" 

3 

{ 

"Name" : "Paris spécialités", 
"City" : "Paris", 
"Country" : "France" 

}, 

t 

"Name" : "Rattlesnake Canyon Grocery", 
"City" : "Albuquerque", 
"Country" : "USA" 

}, 

{ 

"Name" : "Simons bistro", 
"City" : "K?benhavn", 
"Country" : "Denmark" 

}, 

d 

"Name" : "The Big Cheese", 
"City" : "Portland", 
"Country" : "USA" 

}, 

{ 

"Name" : "Vaffeljernet", 
Gade he PARNIS, 
"Country" : "Denmark" 

}, 

1 

"Name" : "Wolski Zajazd", 
"City" : "Warszawa", 
"Country" : "Poland" 

} 

] 


AngularJS $http 


AngularJS $http 是 一 个 用 于 读 取 web 服 务 器 上 数据 的 服务 。 
$http.get(url) 是 用 于 读 取 服务 器 数据 的 函数 。 


AngularJS 实例 


<div ng-app="" ng-controller="customersController"> 


«ul» 
«li ng-repeat="x in names"> 
(€ x.Name + ', ' + x.Country }} 
</li> 
</ul> 


</div> 


<script> 

function customersController($scope,$http) { 
$http.get("http://www.w3cschool.cc/try/angular js/data/Customer: 
.success(function(response) {$scope.names = response; }); 


} 


</script> 
EEE Ss 
应 用 解析 : 
AngularJS 应 用 通过 ng-app 定义 。 应 用 在 «div» 中 执行 。 





ng-controller 指令 设置 了 controller 对 象 名 。 

KIZ customersController 是 一 个 标准 的 JavaScript 对 象 构造 器 。 
控制 器 对 象 有 一 个 属性 : $scope.names。 

$http.get() 从 web 服 务 器 上 读 取 静态 JSON 数据 。 


服务 器 数据 文件 为 : 
http://www.w3cschool.cc/try/angularjs/data/Customers JSON.php. 


4 MB Atm A JSON 数据 时 ，$scope.names Z 75 —7 2X8, 


9 以 上 代码 也 可 以 用 于 读 取 数据 库 数据 。 





AngularJS 表格 


ng-repeat 指令 可 以 完美 的 显示 表格 。 


在 表格 中 显示 数据 


使 用 angular 显示 表格 是 非常 简单 的 : 
AngularJS 实例 


<div ng-app="" ng-controller="customersController"> 


<table> 
<tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 
</tr> 
</table> 


</div> 

<script> 

function customersController($scope,$http) { 
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers . 
.success(function(response) {$scope.names = response; )); 

} 


</script> 


加 


使 用 CSS 样式 


为 了 让 页 面 更 加 美观 ， 我 们 可 以 在 页 面 中 使 用 CSS : 





CSS 样式 


«style» 

table, th , td { 
border: 1px solid grey; 
border-collapse: collapse; 
padding: 5px; 


} 
table tr:nth-child(odd) ( 
background-color: #f1f1f1; 


} 
table tr:nth-child(even) { 
background-color: #ffffff; 


} 
</style> 


排序 显示 


如 果 需 要 对 表格 进行 排序 ， 我 们 可 以 添加 orderBy 过 滤器 : 
AngularJS 实例 


«table» 
«tr ng-repeat="x in names | orderBy : 'Country'"» 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 
</tr> 
</table> 


Try it Yourself ? 


使 用 uppercase 滤器 


如 果 字 母 要 转换 为 大 写 ， 可 以 添加 uppercase 过 滤器 : 
AngularJS 实例 


«table» 
«tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country | uppercase}}</td> 
</tr> 
</table> 


AngularJS SQL 


在 前 面 章节 中 的 代码 也 可 以 用 于 读 取 数 据 库 中 的 数据 。 
使 用 PHP 从 MySQL 中 获取 数据 
AngularJS 实例 


«div ng-app="" ng-controller-"customersController"- 


«table» 

«tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 

</tr> 

</table> 


</div> 


<script> 
function customersController($scope,$http) { 
var site = "http://www.w3cschool.cc"; 
var page = "/try/angularjs/data/Customers_MySQL.php"; 
$http.get(site + page) 
.success(function(response) {$scope.names = response; }); 


} 


</script> 


ASP.NET 中 执行 SQL 获取 数据 


AngularJS 实例 


«div ng-app=""" ng-controller-"customersController"- 


«table» 

«tr ng-repeat="x in names"> 
<td>{{ x.Name }}</td> 
<td>{{ x.Country }}</td> 

</tr> 

</table> 


</div> 


<script> 
function customersController($scope,$http) { 
var site = "http://www.w3cschool.cc"; 
var page = "/try/angularjs/data/Customers_SQL.aspx"; 
$http.get(site + page) 
.success(function(response) {$scope.names = response;}); 


} 


</script> 


PHP 读 取 MySQL 数据 代码 


«?php 

header("Access-Control-Allow-Origin: *"); 

header("Content-Type: text/html; charset=UTF-8"); 

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind": 


$result = $conn->query("SELECT CompanyName, City, Country FROM Cus! 


$outp ee 
while($rs = $result->fetch_array(MYSQLI_ASSOC)) { 
if ($outp != "[") {$outp .= ",";) 
$outp .= '("Name":"'  . $rs["CompanyName"] . '",'; 
$outp = mC ay st ' $rs["City"] : hits d 
$outp .= '"Country":"', $rs["Country"] ZEND 
} 
$outp .="]"; 


$conn->close(); 


echo($outp); 
?> 





PHP 读 取 MS Access 代码 


«?php 
header("Access-Control-Allow-Origin: *"); 
header("Content-Type: text/html; charset-IS0-8859-1"); 


$conn - new COM("ADODB.Connection"); 
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwinc 


$rs = $conn->execute("SELECT CompanyName, City, Country FROM Custor 


$outp = "["; 

while (!$rs->EOF) { 
if ($outp != "[") {$outp .= ",";} 
$outp .= '("Name":"' . $rs["CompanyName"] . '",'; 
$outp .= city . $rs["City"] pun 
$outp .= '"Country":"'. $rs["Country"] tU 
$rs->MoveNext(); 

} 

fout pee = 


$conn-»close(); 


echo ($outp); 
?> 


OSS 





服务 端 ASP.NET, VB 和 MS Access 代码 


«99 Import Namespace="System.1I0"%> 

«99 Import Namespace="System.Data"%> 

«99 Import Namespace="System.Data.OleDb"%> 

<% 

Response.AppendHeader("Access-Control-Allow-Origin", "*") 

Dim conn As OleDbConnection 

Dim objAdapter As OleDbDataAdapter 

Dim objTable As DataTable 

Dim objRow As DataRow 

Dim objDataSet As New DataSet() 

Dim outp 

Dim c 

conn = New OledbConnection("ProviderzMicrosoft.Jet.OLEDB.4.0;data : 
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Count! 
objAdapter.Fill(objDataSet, "myTable") 

obj Table=objDataSet.Tables("myTable" ) 


outp = a 

c = chr(34) 

for each x in objTable.Rows 

if outp <> "[" then outp = outp & "," 


outp - outp & "(" & c & "Name" & c & ":" & c & x("CompanyName") 
outp - outp & c & "City" & c &":" & c & x("City") 

outp = outp & c & "Country" & c & ":" & c & x("Country") 
next 


outp = outp & "]" 
response.write(outp) 
conn.close 

%> 


E -———————————— e 





服务 端 ASP.NET, VB Razor 和 SQL Lite 代码 


Qt 

Response.AppendHeader("Access-Control-Allow-Origin", "*") 

var db = Database.Open("Northwind"); 

var query - db.Query("SELECT CompanyName, City, Country FROM Custor 
var outp ="[" 


} 

Qforeach(var row in query) 

1 

if outp <> "[" then outp = Outp + "," 

outp = outp + "{" + C + "Name" * C + ":" + c + @row. CompanyName 
outp = outp + Gor Clty +c + "i" + C + @row.City 

outp = outp + c + "Country" + c + ":" + c + @row. Country 

} 

outp = outp + "|" 

Qoutp 





AngularJS HTML DOM 


AngularJS 有 自己 的 HTML 属性 指 今 。 


ng-disabled #83 


ng-disabled 指令 直接 绑 定 应 用 程序 数据 到 HTML 的 disabled 属性 。 
AngularJS 实例 


«div ng-app=""> 

«p» 

«button ng-disabled="mySwitch">ma#& ! </button> 
</p> 

<p> 

<input type="checkbox" ng-model="mySwitch">#<42 
</p> 


</div> 


实例 讲解 : 
ng-disabled 指令 绑 定 应 用 程序 数据 "mySwitch" 到 HTML 的 disabled 属性 。 


ng-model 18 47$ "mySwitch" 到 HTML input checkbox 元 素 的 内 容 (value) 。 


ng-show 指令 隐藏 或 显示 一 个 HTML 7638. 
AngularJS 实例 


«div ng-app=""> 
«p ng-show="true"> 我 是 可 见 的 。</p> 
«p ng-show="false"> 我 是 不 可 见 的 。</p> 


</div> 


您 可 以 使 用 一 个 评估 为 true or false 的 表达 式 (比如 ng-show="hour < 12") 来 隐 
藏 和 显示 HTML 元 素 。 


在 下 一 章 中 ， 有 另 一 个 实例 ， 通 过 单 击 一 个 按钮 来 隐藏 一 个 HTML 元 素 。 


AngularJS HTML 事件 
AngularJS 有 自己 的 HTML 事件 指 今 。 
ng-click #83 


ng-click 指令 定义 了 一 个 AngularJS 单 击 事件 。 
AngularJS 实例 


«div ng-app="" ng-controller-"myController"- 
«button ng-click="count = count + 1">R# ! </button> 
<p>{{ count }}</p> 


</div> 


隐藏 HTML 元 素 


ng-hide 指令 用 于 设置 应 用 的 一 部 分 不 可 见 。 
ng-hide="true" 让 HTML 元 素 不 可 见 。 
ng-hide="false" 让 元 素 可 见 。 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 
«button ng-click="toggle()"> 隐 藏 /显示 </button> 


«p ng-hide-"myVar"» 

4: «input type="text" ng-model="person.firstName"><br> 
ye: <input type="text" ng-model-"person.lastName"»«br» 
<br> 

姓名 : {{person.firstName + " " + person. lastName}} 

</p> 


</div> 


<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe" 
3 
$scope.myVar - false; 
$scope.toggle - function() ( 


$scope.myVar - !$scope.myVar; 
3 
} 
</script> 
应 用 解析 : 


personController 的 第 一 部 分 与 控制 器 章节 类 似 。 

应 用 有 一 个 默认 属性 : $scope.myVar = false; 

ng-hide 指令 设置 应 用 中 的 元 素 不 可 见 。 

toggle() HAA myVar 变量 的 值 (true 和 false) 。 
ng-hide="true" 让 元 素 不 可 见 。 


显示 HTML 元 素 


ng-show 指令 可 用 于 设置 应 用 中 的 一 部 分 可 见 。 
ng-showz"false" 可 以 设置 HTML 元 素 不 可 见 。 
ng-show="true" 可 以 以 设置 HTML 元 素 可 见 。 
以 下 实例 使 用 了 ng-show 18$: 


AngularJS 实例 


«div ng-app-"" ng-controller="personController"> 
«button ng-click="toggle()"> 隐 藏 /显示 </button> 


<p ng-show="myVar"> 

名 : «input type="text" ng-model="person.firstName"><br> 
Jt: «input type="text" ng-model-"person.lastName"»«br» 
«br» 

姓名 : {{person.firstName + " " + person.lastName]] 

</p> 


</div> 


<script> 
function personController($scope) { 
$scope.person = { 
firstName: "John", 
lastName: "Doe" 
}; 
$scope.myVar = true; 
$scope.toggle = function() { 
$scope.myVar = !$scope.myVar; 
u 
3 


«/script» 


AngularJS 模块 


模块 定义 了 您 的 应 用 程序 。 
所 有 的 控制 器 都 应 该 属于 一 个 模块 。 
模块 保持 全 局 命名 空间 中 的 整洁 。 


AngularJS 模块 实例 


在 本 实例 中 ，"myApp.js" 包含 了 一 个 应 用 程序 模块 定义 ，"myCtrljs" 包含 了 一 个 控 
制 器 : 


AngularJS 实例 


<!DOCTYPE html> 


<html> 

<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 


«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


<script src="myApp.js"></script> 
«script src="myCtrl.js"></script> 


</body> 
</html> 


EE] 


控制 器 污染 了 全 局 命名 空间 

本 教程 中 ， 截 至 目前 为 止 的 所 有 实例 都 使 用 了 全 局 琅 数 。 

在 所 有 的 应 用 程序 中 ， 都 上 应 该 尽量 避免 使 用 全 局 变量 和 全 局 函数 。 
全 局 值 (变量 或 函数 ) 可 被 其 他 脚本 重 写 或 破坏 。 

为 了 解决 这 个 问题 ，AngularJS 使 用 了 模块 。 





AngularJS 模块 


使 用 一 个 简单 的 控制 器 : 
AngularJS 实例 


<!DOCTYPE html> 


«html» 

«body» 

«div ng-app="" ng-controller="myCtrl"> 

{{ firstName + " " + lastName }} 

«/div» 

«script» 

function myCtrl($scope) { 
$scope.firstName - "John"; 
$scope.lastName - "Doe"; 

} 

</script> 


«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


</body> 
</html> 





使 用 一 个 由 模块 BRAHA : 


AngularJS 实例 


<!DOCTYPE html» 

«html» 

«head» 

«script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 
«/head» 


«body» 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 

<script> 


var app = angular.module("myApp", []); 


app.controller("myCtrl", function($scope) { 


$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
3): 
«/script» 
</body> 
</html> 


E E) 





q 请 注意 ， 本 实例 中 ，AngularJS #2 «head» 区 域 被 加 载 。 


AIR XE SL Er DIOE TE fn] 46 ? 


对 于 HTML 应 用 程序 ， 通 常 建议 把 所 有 的 脚本 都 放置 在 <body> 元 素 的 最 底部 。 
这 会 提高 网 页 加 载 速度 ， 因 为 HTML 加 载 不 受制 于 脚本 加 载 。 


在 上 面 的 多 个 AngularJS 实例 中 ， 您 将 看 到 AngularJS 库 是 在 文档 的 «head» 区 域 
被 加 载 。 


在 上 面 的 实例 中 ，AngularJS 在 <head> 元 素 中 被 加 载 ， 因 为 对 angularmodule 的 
调用 只 能 在 库 加 载 完 成 后 才能 进行 。 


另 一 个 解决 方案 是 在 «body» 元 素 中 加 载 AngularJS 库 ， 但 是 必须 放置 在 您 的 
AngularJS 脚本 前 面 : 


AngularJS 实例 


<!DOCTYPE html> 


<html> 

<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


<script> 
var app = angular.module("myApp", []); 


app.controller("myCtrl", function($scope) { 


$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
3): 
«/script» 
</body> 
</html> 


EE) 





AngularJS 应 用 程序 文件 


现在 您 已 经 知道 模块 是 什么 以 及 它们 是 如 何 工 作 的 ， 现 在 您 可 以 尝试 创建 您 自己 的 
应 用 程序 文件 。 


您 的 应 用 程序 至 少 应 该 有 一 个 模块 文件 ， 一 个 控制 器 文件 。 
首先 ， 创 建 模块 文件 "myApp.js" : 


var app = angular.module("myApp", []); 


然后 ， 创 建 控制 器 文件 。 本 实例 中 是 "myCtrljs"”: 


app.controller("myCtrl", function($scope) ( 
$scope.firstName - "John"; 
$scope.lastName - "Doe"; 


最 后 ， 编辑 您 的 HTML 页 面 : 


AngularJS 实例 


<!DOCTYPE html> 


<html> 

<body> 

«div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 

</div> 


<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js' 


<script src="myApp.js"></script> 
«script src="myCtrl.js"></script> 


</body> 
</html> 





AngularJS 表单 


AngularJS 表单 是 输入 控件 的 集合 。 


HTML 控件 


以 下 HTML input 元 素 被 称 为 HTML 控件 : 


input 元 素 
select 元 素 
button 元 素 
textarea 元 素 


HTML 表单 


HTML 表单 通常 与 HTML 控件 同时 存在 。 


AngularJS 表单 实例 


<script>function ExampleController($scope) { $scope.master = {"fir: 
«form novalidate-"" class-"ng-pristine ng-valid">First Name: 

<input type="text" ng-model="user.firstName" class="ng-pristine ng: 
Last Name: 

<input type="text" ng-model-"user.lastName" class="ng-pristine ng- 
<button ng-click="reset()">RESET</button></form> 


form = {"firstName":"John", "LastName": "Doe"} 


master = {"firstName":"John", "lastName":"Doe"} 


mi — # 


应 用 程序 代码 





«div ng-app=""" ng-controller="formController"> 
<form novalidate> 
First Name:<br> 
<input type="text" ng-model="user.firstName"><br> 
Last Name:<br> 
<input type="text" ng-model="user.lastName"> 
<br><br> 
«button ng-click="reset()">RESET</button> 
</form> 
<p>form = {{user}}</p> 
<p>master = {{master}}</p> 
</div> 


<script> 
function formController ($scope) { 
$scope.master = {firstName: "John", lastName: "Doe"}; 
$scope.reset = function() { 
$scope.user = angular.copy($scope.master); 


J; 
$scope.reset(); 
J; 
</script> 


@ HTML 属性 novalidate 用 于 禁用 浏览 器 的 默认 验证 。 


实例 解析 


AngularJS ng-model 指 邻 用 于 绑 定 input 元 素 到 模型 中 。 
模型 对 象 master 的 值 为 {"firstName" : "John", "lastName" : "Doe", 
REKA reset 设置 了 模型 对 象 user 等 于 master. 


AngularJS 输入 验证 
AngularJS 表单 和 控件 可 以 验证 输入 的 数据 。 
输入 验证 


在 前 面 的 几 个 章节 中 ， 你 已 经 学 到 关于 AngularJS 表单 和 控件 的 知识 。 
AngularJS 表单 和 控件 可 以 提供 验证 功能 ， 并 对 用 户 输入 的 非法 数据 进行 警告 。 


9 客户 端的 验证 不 能 确保 用 户 输入 数据 的 安全 ， 所 以 服务 端的 数据 验证 也 是 
必须 的 。 


应 用 代码 


<!DOCTYPE html» 
«html» 


<body> 
<h2>Validation Example</h2> 


<form ng-app-"" ng-controller="validateCtr1" 
name="myForm" novalidate> 


<p>Username: <br> 
<input type="text" name="user" ng-model="user" required> 
«span style="color:red" ng-show="myForm.user.$dirty && myForm.use 
<span ng-show="myForm.user.$error.required">Username is required 
</span> 

</p> 


<p>Email:<br> 
<input type="email" name="email" ng-model="email" required> 
<span style="color:red" ng-show="myForm.email.$dirty && myForm.er 
<span ng-show="myForm.email.$error.required">Email is required.<, 
«span ng-show="myForm.email.$error.email">Invalid email address.< 
</span> 

</p> 


<p> 
<input type="submit" 
ng-disabled="myForm.user.$dirty && myForm.user.$invalid | | 
myForm.email.$dirty && myForm.email.$invalid"> 

</p> 


</form> 


«script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min. j: 
<script> 
function validateCtrl($scope) { 

$scope.user - 'John Doe'; 

$scope.email - 'john.doeQgmail.com'; 


j 


«/script» 


«/body» 
«/html» 





@ HTML 表单 属性 novalidate 用 于 禁用 浏览 器 默认 的 验证 。 


实例 解析 


AngularJS ng-model 指 合 用 于 绑 定 输入 元 素 到 模型 中 。 


模型 对 象 有 两 个 属性 : user 和 email. 
我 们 使 用 了 ng-showiss, color:red 在 邮件 是 $dirty 或 $invalid 才 显 示 。 


AngularJS Bootstrap 


AngularJS 的 首选 样式 表 是 Twitter Bootstrap, Twitter Bootstrap 是 目前 最 受 欢迎 
的 前 端 框架 。 


查看 Bootstrap 教 程 。 


Bootstrap 


你 可 以 在 你 的 AngularJS 应 用 中 加 入 Twitter Bootstrap， 你 可 以 在 你 的 <head> 元 
素 中 添加 如 下 代码 : 


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3 
| 
如 果 站 点 在 国内 ， 建 议 使 用 百度 静态 资源 库 的 Bootstrap， 代 码 如 下 : 





<link rel="stylesheet" hrefz"//apps.bdimg.com/libs/bootstrap/3.2.0, 





以 下 是 一 个 完整 的 HTML 实例 , 使 用 了 AngularJS 指令 和 Bootstrap 类 。 
HTML 代码 


<!DOCTYPE html» 

«html ang-app=""> 

«head» 

«link rel="stylesheet" hrefz"http://apps.bdimg.com/libs/bootstrap/: 
«/head» 


«body ng-controller="userController"> 
«div class="container"> 


<h3>Users</h3> 


<table class="table table-striped"> 
<thead><tr> 
<th>Edit</th> 
<th>First Name</th> 
<th>Last Name</th> 
</tr></thead> 
<tbody><tr ng-repeat="user in users"> 
<td> 


«button class="btn" ng-click="editUser(user.id)"> 
<span class="glyphicon glyphicon-pencil"></span>&nbsp; &nbsp;t 
</button> 
</td> 
<td>{{ user.fName }}</td> 
<td>{{ user.lName }}</td> 
</tr></tbody> 
</table> 


<hr> 

«button class="btn btn-success" ng-click="editUser('new' )"> 
<span class="glyphicon glyphicon-user"></span> Create New User 

«/button» 

«hr» 


«h3 ng-show-"edit"»Create New User:</h3> 
«h3 ng-hide="edit">Edit User:</h3> 


<form class="form-horizontal"> 
<div class="form-group"> 
<label class="col-sm-2 control-label">First Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"fName" ng-disabled-"!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Last Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"lName" ng-disabled="!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Password:</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passwi" placeholder="Password' 
</div> 
</div> 
<div class="form-group"> 
«label class="col-sm-2 control-label">Repeat :</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passw2" placeholder="Repeat P: 
</div> 
</div> 
</form> 


<hr> 

«button class="btn btn-success" ng-disabled="error || incomplete"> 
<span class="glyphicon glyphicon-save"></span> Save Changes 

</button> 

</div> 


<script src 
<script src 


"http://apps.bdimg.com/libs/angular.js/1.2.15/angula! 
"myUsers.js"></script> 


«/body» 
«/html»» 


E 
| 














指令 解析 


AngularJS 184: 描述 
html ng-app Jj «html» 元 素 定 义 一 个 应 用 (未 命名 ) 
body ng- 


= mo. —A zo | n 
controller 为 «body» 元 素 定义 一 个 控制 器 


4 + HY 每 个 ; — 
tr ng-repeat E users 对 象 数组 ， 每 个 user 对 象 放 在 “<tr> 元 素 


button ng-click 当 点 击 «button» 元 素 时 调用 函数 editUser() 

h3 ng-show 如 果 edit = true 显示 «h3» FOR 

h3 ng-hide 如 果 edit = true 隐藏 <h3> 元 素 

input ng-model 为 应 用 程序 绑 定 <input> 元 素 

button ng- 如 果 发 生 错误 或 者 ncomplete = true 禁用 <button> 元 
disabled 素 


Bootstrap 类 解析 


元 素 
<div> 
<table> 
<table> 
<button> 
<button> 
<span> 
<span> 
<span> 
<span> 
«form» 
<div> 
<label> 
<label> 


<div> 


Bootstrap # 
container 
table 
table-striped 
btn 
btn-success 
glyphicon 
glyphicon-pencil 
glyphicon-user 
glyphicon-save 
form-horizontal 
form-group 
control-label 
col-sm-2 


col-sm-10 


JavaScript 代码 


表格 

带 条 纹 背 景 的 表格 
按钮 
成 功 按钮 
字形 图 标 
铅笔 图 标 
用 户 图 标 
保存 图 标 
水 平 表格 
表单 组 
控制 器 标签 
eX 2 列 
SER 10 列 


function userController($scope) { 


$scope. 
$scope. 
$scope. 
$scope. 
$scope. 
(id: 


2 
3 
14, 
5 
6 


1, 


, 


~ 


fName = '' 


fName:'Hege',  lName:"Pege" }, 
fName:'Kim', lName:"Pim" }, 
fName:'Sal', lName:"Smith" }, 
fName:'Jack',  lName:"Jones" Jj, 
fName:'John',  lName:"Doe" Jj, 
fName:'Peter', lName:"Pan" ) 


.edit - true; 
.error - false; 
.incomplete - false; 


$scope.editUser = function(id) { 
if (id == 'new') { 

$scope.edit = true; 

$scope.incomplete = true; 


} 
Hh 


$scope.fName 


tr. 
, 


$scope.lName soa 
} else { 
$scope.edit = false; 


$scope. fName 
$scope.lName 


$scope 
$scope 
$scope 
$scope 


$scope.users[id-1].fName; 
$scope.users[id-1].lName; 


.$watch('passwi',function() {$scope.test 
.$watch('passw2',function() {$scope.test 
.$watch('fName', function() {$scope.test 
.$watch('lName', function() {$scope.test 


$scope.test = function() { 
if ($scope.passwi !== $scope.passw2) { 
$scope.error = true; 
} else { 
$scope.error = false; 


} 


$scope.incomplete = false; 

if ($scope.edit && (!$scope.fName.length | | 
!$scope.lName.length | | 

!$scope.passwi.length || !$scope.passw2.length)) { 


} 
Po 


} 


$scope.incomplete = true; 


JavaScript 代码 解析 


Scope 属性 用 途 
$scope.fName 模型 变量 (用 户 名 ) 
$scope.IName 模型 变量 (用 户 姓 ) 
$scope.passw1 模型 变量 (用 户 密码 1) 
$scope.passw2 模型 变量 (用 户 密码 2) 
$scope.users 模型 变量 (用 户 的 数组 ) 
$scope.edit 当 用 户 点 击 创建 用 户 时 设置 为 true。 
$scope.error 如 果 passw1 不 等 于 passw2 设置 为 true 
$scope.incomplete 如 果 每 个 字段 都 为 空 (length = 0) 设 置 为 true 
$scope.editUser 设置 模型 变量 
$scope.watch 监控 模型 变量 


$scope.test 验证 模型 变量 的 错误 和 完整 性 


AngularJS Include (包含 ) 
使 用 AngularJS, 你 可 以 在 HTML HAS HTML 文件 。 


在 未 来 的 HTML 中 包含 HTML 文件 


在 HTML 中 ， 目 前 还 不 支持 包含 HTML 文件 的 功能 。 


W3C 已 经 建议 http:/www.w3.org 在 未 来 的 HTML 中 支持 包含 HTML 的 功能 ， 格 式 
如 下 : 


«link rel="import" hrefz"/path/navigation.html"- 


Bs Aum eR 
大 部 分 web 服 务 器 支持 服务 端 脚本 的 包含 (SSI : Server Side Includes), 
使 用 SSI, 你 可 以 在 HTML 页 面 发送 至 浏览 器 前 包含 HTML. 


PHP 实例 


«?php require("navigation.php"); ?> 


客户 端 包含 
客户 端 在 HTML 中 使 用 JavaScript 有 多 种 方式 可 以 包含 HTML 文件 。 


通常 我 们 使 用 http 请 求 (AJAX) 从 服务 端 获取 数据 ， 返 回 的 数据 我 们 可 以 通过 使 用 
innerHTML 写 入 到 HTML 元 素 中 。 


AngularJS &Z 


使 用 AngularJS, 你 可 以 使 用 ng-include 指令 来 包含 HTML ANB: 


实例 


«body» 


«div class="container"> 
«div ng-include="'myUsers_List.htm'"></div> 
«div ng-include="'myUsers_Form.htm'"></div> 
«/div» 


</body> 
步骤 如 下 。 

步骤 1: 创建 HTML 列表 
myUsers List.html 


«table class-"table table-striped"> 
<thead><tr> 
<th>Edit</th> 
<th>First Name</th> 
<th>Last Name</th> 
</tr></thead> 
<tbody><tr ng-repeat="user in users"> 
<td> 
<button class="btn" ng-click="editUser(user.id)"> 
<span class="glyphicon glyphicon-pencil"></span>&nbsp; &nbsy 
</button> 
</td> 
<td>{{ user.fName }}</td> 
<td>{{ user.lName }}</td> 
</tr></tbody> 
</table> 


b ee 





步骤 2: 创建 HTML X 


myUsers List.html 


«button class="btn btn-success" ng-click-"editUser('new')"» 
«span class="glyphicon glyphicon-user"></span> Create New User 

«/button» 

«hr» 


«h3 ng-show="edit">Create New User:</h3> 
«h3 ng-hide="edit">Edit User:</h3> 


<form class="form-horizontal"> 
<div class="form-group"> 
<label class="col-sm-2 control-label">First Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"fName" ng-disabled-"!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Last Name:</label> 
<div class="col-sm-10"> 
<input type="text" ng-model-"lName" ng-disabled-"!edit" placehc 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 control-label">Password:</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passwi" placeholder="Password' 
</div> 
</div> 
<div class="form-group"> 
«label class="col-sm-2 control-label">Repeat :</label> 
<div class="col-sm-10"> 
<input type="password" ng-model="passw2" placeholder="Repeat P: 
</div> 
</div> 
</form> 


<hr> 

<button class="btn btn-success" ng-disabled="error || incomplete"> 
<span class="glyphicon glyphicon-save"></span> Save Changes 

</button> 


站 





步骤 3: 创建 主页 


myUsers.html 


<!DOCTYPE html» 

«html ng-app=""> 

«head» 

«link rel="stylesheet" href = "http://apps.bdimg.com/libs/bootstra[ 
</head> 


<body ng-controller="userController"> 


<div class="container"> 

«div ng-include="'myUsers_List.htm'"></div> 
«div ng-include="'myUsers_Form.htm'"></div> 
</div> 


<script src= "http://apps.bdimg.com/libs/angular.js/1.2.15/angular 
<script src= "myUsers.js"></script> 


</body> 
</html> 


i] — 3} 





AngularJS 应 用 程序 


现在 是 时 候 创建 一 个 真正 的 AngularJS 应 用 程序 了 。 


AngularJS 应 用 程序 


您 已 经 学 习 了 足够 多 关于 AngularJS 的 知识 ， 现 在 可 以 开始 创建 您 的 第 一 个 
AngularJS 应 用 程序 : 


我 的 笔记 


«textarea cols="40" rows="10"></textarea> 
<button> 保 存 </button> <button> 清 除 </button> 


剩 下 的 字符 数 : 


应 用 程序 讲解 
AngularJS 实例 


«div ng-app="myTodoApp" ng-controller-"myTodoCtrl"- 
<h2> 我 的 笔记 </h2> 

<p><textarea ng-model-"message" cols="40" rowsz"10"»«/textarea»«/p: 
<p> 

«button ng-click="save()">(R#</button> 

«button ng-click="clear()"> 清 除 </button> 

</p> 

<p> 剩 下 的 字符 数 : «span ng-bind="left()"></span></p> 


«/div» 


«script src="myTodoApp.js"></script> 
«script src="myTodoCtrl.js"></script> 


E = 











应 用 程序 文件 "myTodoApp.js" : 


var app - angular.module("myTodoApp", []); 


控制 器 文件 "myTodoCtrl.js" : 


app.controller("myTodoCtrl", function($scope) { 
$scope.message = ""; 
$scope.left = function() {return 100 - $scope.message. length; 
$scope.clear = function() {$scope.message="";}; 
$scope.save = function() {$scope.message="";}; 


3); 
aa | 





HTML 页 面 中 的 一 个 <div>， 指 向 ng-app="myTodoApp" 和 ng- 
controller="myTodoCtrl" : 


«div ng-app="myTodoApp" ng-controller-"myTodoCtrl"- 


一 个 ng-model 指令 ， 绑 定 一 个 «textarea» 到 控制 器 变量 message : 


«textarea ng-model="message" cols="40" rows="10"></textarea> 


两 个 ng-click 事件 ， 调 用 控制 器 画 数 clear() 和 save() : 


«button ng-click="save()"> 保 存 </button> 
«button ng-click="clear()"> 清 除 </button> 


一 个 ng-bind 指令 ， 绑 定 控制 器 函数 left() 到 一 个 <span>， 字 符 会 向 左 对 齐 显 
ax 


剩 下 的 字符 数 : <span ng-bind="left()"></span> 


两 个 应 用 程序 库 被 添加 到 HTML 页 面 : 


«script src="myTodoApp.js"></script> 
«script src="myTodoCtrl.js"></script> 


AngularJS 参考 手册 


AngularJS #83 


本 教程 中 使 用 的 AngularJS #89 : 


HT 
ng, app 
ng bind 
ng click 
ng controller 
ng disabled 
ng init 
ng model 
ng repeat 


ng show 


定义 应 用 程序 的 根 元 素 。 

HE HTML 元 素 到 应 用 程序 数据 。 

定义 元 素 被 单 击 时 的 行为 。 

为 应 用 程序 定义 控制 器 对 象 。 

线 定 应 用 程序 数据 到 HTML 的 disabled 属性 。 
为 应 用 程序 定义 初始 值 。 

绑 定 应 用 程序 数据 到 HTML 元 素 。 

为 控制 器 中 的 每 个 数据 定义 一 个 模板 。 
显示 或 隐藏 HTML 元 素 。 


AngularJS it 3825 
本 教程 中 使 用 的 AngularJS 过 滤器 : 


currency 
filter 
lowercase 
orderBy 


uppercase 


H3 
格式 化 数字 为 货币 格式 。 

从 数组 项 中 选择 一 个 子 集 。 
格式 化 字符 串 为 小 写 。 

根据 某 个 表达 式 排列 数组 。 
格式 化 字符 串 为 大 写 。 


iE 


有 关 过 滤器 的 具体 知识 在 AngularJS 过 滤器 一 章 中 进行 讲解 。 


HTML 事件 
控制 器 
HTML DOM 
GA 

AT 

BA 

AT 

BA 

AT 


HTML DOM 


免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 
随 之 而 来 的 风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 
法 律 问题 及 风险 不 承担 任何 责任 。 


